<template>
  <view class="page-detail">
    <view class="navbar">
      <u-icon name="arrow-left" color="#191919" size="20" @click="goBack()" class="back-box"></u-icon>
      <view class="title">详情</view>
    </view>

    <view class="top-box"> </view>
    <view class="context content nyj-con-detail">
      <view class="number-title"></view>
      <u-list title-bg-color="rgb(243, 244, 246)" customStyle="{'font-size': '16px'}">
        <u-cell title="企业名称" :label="detail.qyName" center></u-cell>

        <u-cell title="审批节点" :value="detail.taskName" center></u-cell>

        <u-cell title="审批状态" :value="detail.status == 0 ? '审批中' : '已完成'" center></u-cell>

        <u-cell title="备注" :label="detail.qyName" center></u-cell>
      </u-list>
    </view>
    <view class="nyj-btns btns">
      <button type="primary" @click="goApply">审核</button>
    </view>
  </view>
</template>

<script>
  import { qryInfoDetail } from "@/api/cockpit/need";
  export default {
    props: {
      ticketCode: {
        type: String,
      },
      pCode: {
        type: String,
      },
    },
    data() {
      return {
        id: "",
        detail: {},
        coalOptions: [],
        instanceId: "",
      };
    },
    onShow() {
      this.getDetail();
    },
    onLoad(option) {
      this.id = option.id;
      this.instanceId = option.instanceId;
    },
    methods: {
      goBack() {
        uni.navigateBack();
      },
      goApply() {
        this.$tab.navigateTo("/pages/need/apply?instanceId=" + this.instanceId);
      },
      async getDetail() {
        let res = (await qryInfoDetail({ id: this.id })) || {};
        let data = res.data;
        this.detail = data;
      },
    },
  };
</script>

<style lang="less" scoped>
  .page-detail {
    .navbar {
      .header-info {
        display: flex;
        height: 90rpx;
        line-height: 90rpx;
        margin-top: 86rpx;

        .u-icon {
          width: 10%;
          padding-left: 25rpx;
        }

        .title {
          font-size: 36rpx;
          font-weight: 500;
          color: #ffffff;
          text-align: center;
          width: 75%;
        }

        .right-btn {
          color: #fff;
          font-size: 36rpx;
        }
      }
    }

    .top-box {
      /* background-image: url("/static/images/common/list-top-bg.png"); */
      background-repeat: no-repeat;
      background-size: 100%;
    }

    .context {
      background-color: #ffffff;
      margin: 134rpx 20rpx 20rpx 20rpx;
      padding: 0 20rpx 20rpx 20rpx;
      border-radius: 16rpx;

      .number-title {
        font-size: 28rpx;
        color: #233239;
        padding-top: 10rpx;
        padding-bottom: 10rpx;
        padding-right: 28rpx;
        text-align: right;
      }

      /deep/.u-cell {
        line-height: 96rpx;
      }

      /deep/.u-cell__title-text {
        font-size: 32rpx;
        color: #666666;
      }

      /deep/.u-cell__value {
        font-size: 34rpx;
        color: #333333;
      }

      /deep/.u-cell__label {
        font-size: 34rpx;
        color: #333333;
      }
    }

    .step-box {
      background: #ffffff;
      border-radius: 15rpx 15rpx 15rpx 15rpx;
    }
  }
</style>